<template>
  <div class="box">
    <div
      style="box-sizing: border-box; width:100%"
      :style="
        'padding:' +
          data.content_padding.top / 2 +
          'px ' +
          data.content_padding.lr / 2 +
          'px ' +
          data.content_padding.bottom / 2 +
          'px;background:' +
          data.content_bgcolor
      "
    >
      <div
        class="box_title"
        :style="'font-size:' + data.title.size + 'px;color:' + data.title.color"
      >
        会员专属权益
      </div>
      <div class="box_content">
        <div class="box_item">
          <div
            class="icongroup"
            v-if="data.style_type == 1"
            :style="
              'padding:' +
                data.padding.top / 2 +
                'px ' +
                data.padding.lr / 2 +
                'px ' +
                data.padding.bottom / 2 +
                'px '
            "
          >
            <div
              class="container"
              :style="
                'height:' +
                  (48 + data.width) * data.rows +
                  'px;background:' +
                  data.bgcolor +
                  ';border-radius:' +
                  data.radius.top / 2 +
                  'px ' +
                  data.radius.top / 2 +
                  'px ' +
                  data.radius.bottom / 2 +
                  'px ' +
                  data.radius.bottom / 2 +
                  'px;'
              "
            >
              <el-carousel
                :height="(48 + data.width) * data.rows + 'px'"
                :autoplay="false"
                indicator-position="none"
              >
                <el-carousel-item v-for="item in ctabs" :key="item">
                  <ul class="bg">
                    <li
                      class="icon-item"
                      :style="'width:' + 100 / data.num + '%;'"
                      v-for="(item, i) in data.list[data.currentIndex].slice(
                        0 + data.num * ((item - 1) * data.rows),
                        data.num * data.rows * item
                      )"
                      :key="i"
                    >
                      <div class="icon-box">
                        <vimage :src="item.icon" :style="bd"></vimage>
                      </div>
                      <div
                        class="title"
                        :style="
                          'color:' +
                            data.textcolor +
                            ';font-size:' +
                            data.card_font_size +
                            'px'
                        "
                      >
                        {{ item.text }}
                      </div>
                    </li>
                  </ul>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <div
            class="cardgroup"
            v-if="data.style_type == 2"
            :style="
              'padding:' +
                data.padding.top / 2 +
                'px ' +
                data.padding.lr / 2 +
                'px ' +
                data.padding.bottom / 2 +
                'px '
            "
          >
            <div
              class="container"
              :style="'height:' + (56 + data.width) * data.rows + 'px'"
            >
              <el-carousel
                :height="
                  (56 + data.width + data.card_font_size / 5) * data.rows + 'px'
                "
                :autoplay="false"
                indicator-position="none"
              >
                <el-carousel-item v-for="item in ctabs" :key="item">
                  <ul class="bg">

                    <li
                      class="icon-item"
                      :style="'width:' + 100 / data.num + '%;'"
                      v-for="(item, i) in data.list[data.currentIndex].slice(
                        0 + data.num * ((item - 1) * data.rows),
                        data.num * data.rows * item
                      )"
                      :key="i"
                    >
                      <div
                        class="aaa"
                        :style="
                          'background:' +
                            item.card_bg +
                            ';border-radius:' +
                            data.radius.top / 2 +
                            'px ' +
                            data.radius.top / 2 +
                            'px ' +
                            data.radius.bottom / 2 +
                            'px ' +
                            data.radius.bottom / 2 +
                            'px;'
                        "
                      >
                        <div
                          class="title"
                          :style="
                            'color:' +
                              item.card_color +
                              ';font-size:' +
                              data.card_font_size +
                              'px;'
                          "
                        >
                          {{ item.text }}
                        </div>
                        <div class="icon-box">
                    <!--      <img
                            :src="item.icon"
                            :style="bd"
                            style="margin:auto"
                          /> -->
                          <vimage :src="item.icon" :style="bd" style="margin:auto"></vimage>
                        </div>
                      </div>
                    </li>
                  </ul>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  computed: {
    ctabs() {
      let n = 1;
      switch (this.data.rows) {
        case 1:
          //单行
          n = Math.ceil(this.data.list[this.data.currentIndex].length / this.data.num);
          break;
        case 2:
          //双行
          n = Math.ceil(this.data.list[this.data.currentIndex].length / (this.data.num * 2));
          break;
        default:
          break;
      }
      return n;
    },
    bd() {
      let s =
        "width: " + this.data.width + "px; height: " + this.data.width + "px;";
      switch (this.data.type) {
        case 1:
          s = s + "border-radius:0;";
          break;
        case 2:
          s = s + "border-radius:10px;";
          break;
        case 3:
          s = s + "border-radius:50%;";
          break;
        default:
          break;
      }
      return s;
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  .box_title {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 20px;
    color: #121835;
  }
  .box_content {
    width: 100%;
    .box_item {
      .icongroup {
        .bg {
          display: flex;
          flex-wrap: wrap;

          .icon-item {
            display: flex;
            flex-direction: column;
            // height: 85px;

            .icon-box {
              margin: 0 auto;
              display: flex;
              flex-direction: column;
              position: relative;
              padding: 16px 0 8px;

              .img-box {
                width: 80px;
                height: 80px;
                overflow: hidden;

                img {
                  width: 100%;
                  margin: auto;
                }
              }

              .custom-icon {
                font-size: 28px;
                height: 28px;
                line-height: 28px;
                display: flex;
                flex-direction: column;
              }
            }
            .title {
              text-align: center;
              margin: 0;
              font-size: 15px;
              font-family: PingFang SC;
              color: #ffffff;
              // letter-spacing: 2px;
              text-indent: 2px;
            }
          }
        }
      }
      .cardgroup {
        .container {
          .bg {
            display: flex;
            flex-wrap: wrap;

            .icon-item {
              display: flex;
              flex-direction: column;
              padding: 8px 8px 0;
              .aaa {
                background: cadetblue;
                padding: 10px;
                border-radius: 10px;
                box-shadow: #999 0px 3px 5px;
                .icon-box {
                  margin: 5px auto 0;
                  display: flex;
                  flex-direction: column;
                  position: relative;

                  .img-box {
                    width: 80px;
                    height: 80px;
                    overflow: hidden;
                    img {
                      width: 100%;
                      margin: auto;
                    }
                  }

                  .custom-icon {
                    font-size: 28px;
                    height: 28px;
                    line-height: 28px;
                    display: flex;
                    flex-direction: column;
                  }
                }
                .title {
                  text-align: center;
                  margin: 0;
                  font-size: 15px;
                  font-family: PingFang SC;
                  color: #ffffff;
                  letter-spacing: 1px;
                  text-indent: 1px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
